<!--
/* 大屏管理导航页
 * Author:      yangjq 
 * CreateTime:  2023/10/12 18:58:52 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:07:27 
 * Description: 
*/ 
-->
<template>
  <div class="ginger">
    <el-config-provider :locale="zhCn">
      <div class="common-layout">
        <el-container :style="{ height: ITsb_heightContainer + 'px' }">
          <el-aside width="180px">
            <el-menu small default-active="1" class="el-menu-vertical-demo"
                     :style="{ height: ITsb_heightContainer + 'px' }">

              <el-menu-item @click="openItem('item1')" index="1">
                <el-icon>
                  <Paperclip/>
                </el-icon>
                <span>专业软件管理</span>
              </el-menu-item>

              <el-menu-item @click="openItem('item5')" index="5">
                <el-icon>
                  <Paperclip/>
                </el-icon>
                <span>软件用户管理</span>
              </el-menu-item>

              <el-menu-item @click="openItem('item6')" index="6">
                <el-icon>
                  <Paperclip/>
                </el-icon>
                <span>公司配置管理</span>
              </el-menu-item>

              <el-menu-item @click="openItem('item2')" index="2">
                <el-icon>
                  <Paperclip/>
                </el-icon>
                <span>计算资源管理</span>
              </el-menu-item>

              <el-menu-item @click="openItem('item3')" index="3">
                <el-icon>
                  <Paperclip/>
                </el-icon>
                <span>存储资源管理</span>
              </el-menu-item>

              <el-menu-item @click="openItem('item4')" index="4">
                <el-icon>
                  <Paperclip/>
                </el-icon>
                <span>业务数据管理</span>
              </el-menu-item>

<!--              <el-menu-item @click="open5" index="5">-->
<!--                <el-icon>-->
<!--                  <Paperclip/>-->
<!--                </el-icon>-->
<!--                <span>PUE管理</span>-->
<!--              </el-menu-item>-->

            </el-menu>
          </el-aside>

          <el-main style="overflow-x: hidden !important;">
            <LicenseSoftwareList v-if="menuitem.item1"/>
            <ComputManager v-if="menuitem.item2"/>
            <StorageManager v-if="menuitem.item3"/>
            <BussinessManager v-if="menuitem.item4"/>
            <SoftwareUserManager v-if="menuitem.item5"/>
            <CompanyInfoManager v-if="menuitem.item6"/>
          </el-main>
        </el-container>
      </div>
    </el-config-provider>
  </div>
</template>

<script lang="ts" setup>
import zhCn from "element-plus/lib/locale/lang/zh-cn"
import {reactive, ref, inject} from 'vue'

import LicenseSoftwareList from './LicenseSoftwareList.vue';
import ComputManager from './ComputManager.vue';
import StorageManager from './StorageManager.vue';
import BussinessManager from './BussinessManager.vue';
import SoftwareUserManager from './SoftwareUserManager.vue';
import CompanyInfoManager from './CompanyInfoManager.vue';


import {
  Coin,
  Paperclip,
  VideoCamera,
  Printer,
  Smoking,
  FolderOpened,
  SetUp,
  Search,
  CirclePlus,
  Delete,
  Refresh,
  ChatLineRound,
  Operation,
  View
} from "@element-plus/icons-vue"

const ITsb_heightContainer = window.innerHeight - 91
const ITsb_heightTable = window.innerHeight - 177
const ITsb_widthInput = window.innerWidth - 210
const menuitem = reactive({
  item1: true,
  item2: false,
  item3: false,
  item4: false,
  item5: false,
  item6: false,
})

function openItem(item) {
  cleanItem();
  menuitem[item] = true;
}
function cleanItem() {
  for (let menuitemKey in menuitem) {
    menuitem[menuitemKey] = false
  }
}
</script>

<style scoped>
.ginger {
  padding: 5px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}

:deep(.el-main) {
  padding: 0px;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 5px;
}

:deep(.el-form-item__label) {
  padding: 0px 5px 0px 0px;
}

:deep(.el-sub-menu .el-menu-item) {
  min-width: 180px;
}
</style>
